<template>
  <div>
    <div>
      <span>仓库:</span>
      <el-input v-model="warehouseName" style="width: 150px;" clearable placol请der="输入内容"></el-input>
      <span>地址:</span>
      <el-input v-model="warehouseSite" style="width: 150px;" clearable placol请der="输入内容"></el-input>
      <!--表单-->
      <!--弹窗框-->
      <el-button type="primary" @click="select">搜索</el-button>
      <el-button type="primary" @click="dialogFormVisible = true">添加仓库</el-button>
      <el-dialog style="margin-left: 20px" title="添加仓库" :visible.sync="dialogFormVisible" width="34%"
                 center>
        <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
          <el-form-item label="仓库名称" prop="uname">
            <el-input v-model="subForm.uname" clearable placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="city">
            <div class="city" @click="toAddress">
              <el-input v-model="subForm.city" clearable placeholder="请点击输入框选择"></el-input>
            </div>
            <i class="arrow-r"> </i>
            <v-distpicker type="mobile" @selected='selected' v-show="addInp">
            </v-distpicker>
            <div class="mask" v-show="mask"></div>
          </el-form-item>
          <el-form-item label="具体地址" prop="details">
            <el-input v-model="subForm.details" clearable placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addHouse">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <!--表格-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          width="50">
        </el-table-column>
        <el-table-column
          prop="warehouseName"
          label="仓库名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="warehouseSite"
          label="仓库地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="warehouseNumState"
          label="仓库存储情况"
          width="100">
        </el-table-column>
        <el-table-column
          prop="creationTime"
          label="仓库创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          label="最后修改时间"
          width="180">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">移除
            </el-button>
            <el-button
              size="mini"
              type="info"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-dialog style="margin-left: 20px" title="修改仓库" :visible.sync="dialogForm" width="34%"
                       center>
              <el-form ref="Form" :rules='rules' :model="Form" label-width="80px">
                <el-form-item label="仓库名称" prop="uname">
                  <el-input v-model="Form.uname" clearable placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="city">
                  <div class="city" @click="toAddress">
                    <el-input v-model="Form.city" clearable placeholder="请点击输入框选择"></el-input>
                  </div>
                  <i class="arrow-r"> </i>
                  <v-distpicker type="mobile" @selected='selected' v-show="addInp">
                  </v-distpicker>
                  <div class="mask" v-show="mask"></div>
                </el-form-item>
                <el-form-item label="具体地址" prop="details">
                  <el-input v-model="Form.details" clearable placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取 消</el-button>
                <el-button type="primary" @click="updateData(scope.$index, scope.row)">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <!--
      size-change：选择每页显示几行
      current-change：上一页 下一页
      current-page：当前页
      page-sizes：一页显示多少行的集合
      page-size：一页显示多少行
      total：总条数
           -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 15, 20]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker' //引入安装好的包
  export default {
    name: 'AddWarehouse',
    components: {VDistpicker},
    mounted () {//默认第一次加载
      initTable(this)
    },
    data () {
      return {
        dialogFormVisible: false,
        warehouseName: '',
        warehouseSite: '',
        dialogForm:false,
        tableData: [],
        total: 0,
        page: 1,
        size: 5,
        subForm: {
          city: '',
          uname: '',
          details: ''
        },
        Form:{
          city: '',
          uname: '',
          details: '',
          warehouseId:''
        },
        addInp: false,
        mask: false,
        rules: {
          uname: [
            {
              required: true,
              message: '仓库名不能为空',
              trigger: 'blur'
            }
          ],
          city: [
            {
              required: true,
              message: '所在区域必须选择',
              trigger: 'change'
            }
          ],
          details: [
            {
              required: true,
              message: '详细地址必须填写',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    methods: {
      //搜索按钮
      select () {
        // alert(this.warehouseSite)
        initTable(this)
      },
      //移除按钮监听
      handleDelete (index, row) {
        // console.log(index, row);
        // alert(row.warehouseNum)
        if (row.warehouseNum != 1) {
          this.$message.error('仓库有库存，不能移除')
          return false
        }
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get('delWarehouse', {
            params: {
              warehouseId: row.warehouseId
            }
          }).then(resp => {
            if (resp) {
              if (resp.data == '删除成功') {
                this.$message.success(resp.data)
                initTable(this)
              } else {
                this.$message.error(resp.data)
              }
            }
          })
        }).catch(() => {
          //几点取消的提示
        })

      },
      //编辑监听
      handleEdit(index, row){
        this.dialogForm=true
        this.Form.uname=row.warehouseName
        this.Form.city=row.warehouseSite.substring(0,row.warehouseSite.lastIndexOf("区")+1)
        this.Form.details=row.warehouseSite.substring(row.warehouseSite.lastIndexOf("区")+2),((row.warehouseSite.length)-1)
        // this.Form.warehouseId=row.warehouseId
      },
      //修改数据按钮
      updateData(index, row){
        // alert(row.warehouseId)
        if (this.Form.uname == null || this.Form.uname === '') {
          this.$message.error(new Error('仓库名不能为空'))
          return false
        }
        if (this.Form.city == null || this.Form.city === '') {
          this.$message.error(new Error('所在区域必须选择'))
          return false
        }
        if (this.Form.details == null || this.Form.details === '') {
          this.$message.error(new Error('详细地址不能为空'))
          return false
        }
        this.$axios.post('updateWarehouse', {

            warehouseId: row.warehouseId,
            warehouseName:this.Form.uname,
            warehouseSite: this.Form.city+""+ this.Form.details

        }).then(resp => {
          if (resp) {
            if (resp.data == '修改成功') {
              this.$message.success(resp.data)
              this.dialogForm=false
              initTable(this)
            } else {
              this.$message.error(resp.data)
            }
          }
        })

      },
      //编辑监听
      handleEdit(index, row){
        this.dialogForm=true
        this.warehouseId=row.warehouseId
        this.Form.uname=row.warehouseName
        this.Form.city=row.warehouseSite.substring(0,row.warehouseSite.lastIndexOf("区")+1)
        this.Form.details=row.warehouseSite.substring(row.warehouseSite.lastIndexOf("区")+2),((row.warehouseSite.length)-1)
        // this.Form.warehouseId=row.warehouseId
      },
      //修改数据按钮
      updateData(index, row){
        // alert(row.warehouseId)
        if (this.Form.uname == null || this.Form.uname === '') {
          this.$message.error(new Error('仓库名不能为空'))
          return false
        }
        if (this.Form.city == null || this.Form.city === '') {
          this.$message.error(new Error('所在区域必须选择'))
          return false
        }
        if (this.Form.details == null || this.Form.details === '') {
          this.$message.error(new Error('详细地址不能为空'))
          return false
        }
        this.$axios.post('updateWarehouse', {

            warehouseId: this.warehouseId,
            warehouseName:this.Form.uname,
            warehouseSite: this.Form.city+" "+ this.Form.details

        }).then(resp => {
          if (resp) {
            if (resp.data == '修改成功') {
              this.$message.success(resp.data)
              this.dialogForm=false
              initTable(this)
            } else {
              this.$message.error(resp.data)
            }
          }
        })

      },
      //自定义校验规则
      addHouse () {
        if (this.subForm.uname == null || this.subForm.uname === '') {
          this.$message.error(new Error('仓库名不能为空'))
          return false
        }
        if (this.subForm.city == null || this.subForm.city === '') {
          this.$message.error(new Error('所在区域必须选择'))
          return false
        }
        if (this.subForm.details == null || this.subForm.details === '') {
          this.$message.error(new Error('详细地址不能为空'))
          return false
        }

        this.$axios.post('/addWarehouse', {
          warehouseName: this.subForm.uname,
          warehouseSite: this.subForm.city + ' ' + this.subForm.details
        }).then(response => {
          // alert(response.data)
          if (response.data == '添加成功') {
            this.$message.success(response.data)
            this.dialogFormVisible = false
            initTable(this)
          } else if (response.data == '添加失败') {
            this.$message.error(response.data)
          } else {
            this.$message.error(response.data)
          }
        }).catch(err => {
          alert(err.data)
        })

      },
      // 点击弹出三级联动
      toAddress () {
        this.mask = true
        this.addInp = true
      },
      // 省市区三级联动
      selected (data) {
        this.mask = false
        this.addInp = false
        this.subForm.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
      },
      //以下是表格部分的方法
      indexMethod (index) {
        return index + 1
      },
      handleSizeChange (val) {
        this.size = val
        initTable(this)
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        this.page = val
        initTable(this)
        console.log(`当前页: ${val}`)
      }
    },
  }

  function initTable ($this) {
    $this.$axios.post('getWarehouseList', {
      page: $this.page,
      size: $this.size,
      warehouseName: $this.warehouseName,
      warehouseSite: $this.warehouseSite
    }).then(resp => {
      if (resp) {
        $this.tableData = resp.data.warehouseList
        $this.total = resp.data.count
      }
    })
  }

</script>

<style scoped>

</style>
